<!--
 * @Descripttion: 
 * @version: 根据elementUI样式增加季度范围和年度范围
 * @Author: 尹伊
 * @Date: 2021-11-24 11:20:39
 * @LastEditors: 尹伊
 * @LastEditTime:  2021-11-24 11:20:39
-->
<template>
  <el-popover
    placement="bottom"
    v-model="visible"
    popper-class="date-popover"
    :width="type==='quarter' ? 350 : 650"
    trigger="click"
  >
    <template v-if="type==='quarter'">
      <li class="show6">
        <p class="show6P">
          <span>
            <button
              type="button"
              aria-label="前一年"
              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
              @click="prev"
            ></button>
          </span>
          <span role="button" class="span-year" v-if="!showYear" @click="handleClickYear">{{year}}年</span>
          <span role="button" class="span-year" v-else>{{startYear}}年-{{startYear + 9}}年</span>
          <span>
            <button
              type="button"
              aria-label="后一年"
              @click="next"
              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
            ></button>
          </span>
        </p>
        <div class="selectMonth">
          <template v-if="!showYear">
            <p
              v-for="(item,index) in fullMonth"
              :key="index"
              :class="currentDate === item ? 'activeDate' : ''"
              @click.stop="choseHalfYear(item)"
            >{{item}}</p>
          </template>
          <template v-else>
            <p
              v-for="index in 10"
              :key="index"
              :class="currentDate === startYear + index - 1 ? 'activeDate' : ''"
              @click.stop="choseYear(startYear + index - 1)"
            >{{startYear + index - 1}}</p>
          </template>
        </div>
      </li>
      <el-input
        slot="reference"
        prefix-icon="el-icon-date"
        v-model="displayValue"
        readonly
        clearable
        placeholder="请选择"
        style="width: 13.75rem;"
      ></el-input>
    </template>
    <template v-else>
      <div>
        <year-range ref="yearrange" v-if="type==='yearrange'" :visible="visible" @pick="handlePick"></year-range>
        <quarter-range ref="quarterrange" v-else :visible="visible" @pick="handleQuarterPick"></quarter-range>
      </div>
      <div
        slot="reference"
        class="el-date-editor el-range-editor el-input__inner"
        :class="[
      'el-date-editor--' + type,
      pickerSize ? `el-range-editor--${ pickerSize }` : '',
      pickerDisabled ? 'is-disabled' : '',
      pickerVisible ? 'is-active' : ''
    ]"
        @click="handleRangeClick"
        @mouseenter="handleMouseEnter"
        @mouseleave="showClose = false"
        @keydown="handleKeydown"
        ref="reference"
        v-clickoutside="handleClose"
      >
        <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i>
        <input
          autocomplete="off"
          :placeholder="startPlaceholder"
          :value="displayValue && displayValue[0]"
          :disabled="pickerDisabled"
          v-bind="firstInputId"
          :readonly="!editable || readonly"
          :name="name && name[0]"
          @input="handleStartInput"
          @change="handleStartChange"
          @focus="handleFocus"
          class="el-range-input"
        >
        <slot name="range-separator">
          <span class="el-range-separator">{{ rangeSeparator }}</span>
        </slot>
        <input
          autocomplete="off"
          :placeholder="endPlaceholder"
          :value="displayValue && displayValue[1]"
          :disabled="pickerDisabled"
          v-bind="secondInputId"
          :readonly="!editable || readonly"
          :name="name && name[1]"
          @input="handleEndInput"
          @change="handleEndChange"
          @focus="handleFocus"
          class="el-range-input"
        >
        <i
          @click="handleClickIcon"
          v-if="haveTrigger"
          :class="[showClose ? '' + clearIcon : '']"
          class="el-input__icon el-range__close-icon"
        ></i>
      </div>
    </template>
  </el-popover>
</template>

<script>
import Clickoutside from "element-ui/src/utils/clickoutside";
import yearRange from "./year-range";
import quarterRange from "./quarter-range";
const HAVE_TRIGGER_TYPES = [
  "date",
  "datetime",
  "time",
  "time-select",
  "week",
  "month",
  "year",
  "daterange",
  "monthrange",
  "timerange",
  "datetimerange",
  "dates",
  "quarterrange",
  "yearrange"
];
const isString = function(val) {
  return typeof val === "string" || val instanceof String;
};
const validator = function(val) {
  // either: String, Array of String, null / undefined
  return (
    val === null ||
    val === undefined ||
    isString(val) ||
    (Array.isArray(val) && val.length === 2 && val.every(isString))
  );
};
export default {
  directives: { Clickoutside },
  components: {
    yearRange,
    quarterRange
  },
  props: {
    value: {
      type: [String, Array],
      default: ""
    },
    clearable: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: ""
    },
    size: String,
    disabled: Boolean,
    prefixIcon: String,
    startPlaceholder: String,
    endPlaceholder: String,
    editable: {
      type: Boolean,
      default: true
    },
    readonly: Boolean,
    rangeSeparator: {
      default: "-"
    },
    name: {
      default: "",
      validator
    },
    clearIcon: {
      type: String,
      default: "el-icon-circle-close"
    }
  },
  data() {
    return {
      time: "",
      year: new Date().getFullYear(),
      fullMonth: ["1季度", "2季度", "3季度", "4季度"],
      status: "",
      showTimehalfYear: false,
      currentDate: "",
      showYear: false,
      startYear: "",
      visible: false,
      pickerVisible: false,
      showClose: false
    };
  },
  computed: {
    displayValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      }
    },
    pickerSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    pickerDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    },
    triggerClass() {
      return (
        this.prefixIcon ||
        (this.type.indexOf("time") !== -1 ? "el-icon-time" : "el-icon-date")
      );
    },
    ranged() {
      return this.type.indexOf("range") > -1;
    },
    firstInputId() {
      const obj = {};
      let id;
      if (this.ranged) {
        id = this.id && this.id[0];
      } else {
        id = this.id;
      }
      if (id) obj.id = id;
      return obj;
    },

    secondInputId() {
      const obj = {};
      let id;
      if (this.ranged) {
        id = this.id && this.id[1];
      }
      if (id) obj.id = id;
      return obj;
    },
    haveTrigger() {
      if (typeof this.showTrigger !== "undefined") {
        return this.showTrigger;
      }
      return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1;
    },
    valueIsEmpty() {
      const val = this.value;
      if (Array.isArray(val)) {
        for (let i = 0, len = val.length; i < len; i++) {
          if (val[i]) {
            return false;
          }
        }
      } else {
        if (val) {
          return false;
        }
      }
      return true;
    }
  },

  watch: {
    value(v) {
      if (!v) {
        this.currentDate = "";
      }
    },
    visible(v) {
      if (v) {
        this.showYear = false;
      }
    }
  },

  methods: {
    prev() {
      if (this.showYear) {
        this.startYear = this.startYear * 1 - 10;
      } else {
        this.year = this.year * 1 - 1;
      }
    },
    next() {
      if (this.showYear) {
        this.startYear = this.startYear * 1 + 10;
      } else {
        this.year = this.year * 1 + 1;
      }
    },
    choseHalfYear(v) {
      this.displayValue = this.year + "-" + v;
      this.visible = false;
      this.currentDate = v;
    },
    choseYear(v) {
      this.year = v;
      this.showYear = false;
      if (this.currentDate) {
        this.displayValue = this.year + "-" + this.currentDate;
      }
    },
    // 选择年面板
    handleClickYear() {
      this.startYear = parseInt(this.year / 10) * 10;
      this.showYear = true;
    },
    handleRangeClick() {},
    handleMouseEnter() {
      if (this.pickerDisabled) return;
      if (!this.valueIsEmpty && this.clearable) {
        this.showClose = true;
      }
    },
    handleKeydown() {},
    handleClose() {},
    handleEndInput() {},
    handleEndChange() {},
    handleFocus() {},
    handleStartInput() {},
    handleStartChange() {},
    handleClickIcon(event) {
      if (this.pickerDisabled) return;
      if (this.showClose) {
        this.valueOnOpen = this.value;
        event.stopPropagation();
        this.$emit("input", null);
        this.$refs[this.type].handleClear();
        this.showClose = false;
        // if (this.picker && typeof this.picker.handleClear === "function") {
        //   this.picker.handleClear();
        // }
      } else {
        this.pickerVisible = !this.pickerVisible;
      }
    },
    handlePick(data, visible = false) {
      if (!data) return;
      const start = data[0].getFullYear();
      const end = data[1].getFullYear();
      this.displayValue = [start, end];
      this.visible = visible;
    },
    handleQuarterPick(data, visible = false) {
      if (!data) return;
      const start =
        data[0].getFullYear() + "年" + (data[0].getMonth() + 1) + "季度";
      const end =
        data[1].getFullYear() + "年" + (data[1].getMonth() + 1) + "季度";
      this.displayValue = [start, end];
      this.visible = visible;
    }
  }
};
</script>

<style scoped lang="scss">
.date-popover {
}

.activeDate {
  color: #0080ff;
  // background-color: #0080ff;
  // color: #fff;
  // border-radius: 16px;
  // &:hover {
  //   color: #fff !important;
  // }
}

.show6 {
  // width: 322px;
  // margin-top: 5px;
  // position: absolute;
  z-index: 2;
  /* height: 272px; */
  // height: 110px;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  list-style: none;
  font-size: 14px;
}

.show6P {
  width: 100%;
  height: 43px;
  line-height: 43px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.show6:nth-child(1) span {
  display: inline-block;
  height: 100%;
  line-height: 43px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectMonth {
  width: 100%;
  // height: 14.3125rem;
  height: calc(100% - 43px);
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: flex-start;
}

.selectMonth p {
  // width: 25%;
  width: 55px;
  // height: 25%;
  text-align: center;
  // line-height: 4rem;
  height: 35px;
  line-height: 35px;
  margin: 10px;
}

.selectMonth p:hover {
  // background: rgba(19, 131, 255, 0.052);
  color: #0080ff;
  cursor: pointer;
}

.span-year {
  width: 90%;
  margin: 0 auto;
  display: inline-block;
  float: left;
  text-align: center;
  line-height: 40px;
  &:hover {
    color: #0080ff;
    cursor: pointer;
  }
}

.el-input {
  width: 215px;
  height: 38px;
  display: inline-block;
}
.el-date-editor.el-input__inner {
  width: 360px;
}
.el-date-editor .el-range-separator {
  padding: 0;
}
</style>